{% extends 'home/pub/base.html' %}

{% block zidingyi %}
<link rel="stylesheet" type="text/css" href="/static/home/public/css/list.css">
<link rel="stylesheet" type="text/css" href="/static/home/public/css/list-app.css">
{% endblock %}



{% block content %}
<div class="mainlist app-list">
    <div class="container">
      <!-- 面包屑 导航 -->
      <div class="ml-nav hidden-xs hidden-sm">
            <ol class="breadcrumb">

              <li><a href="./index.html">首页</a></li>
              <li><a href="#">全部商品</a></li>
              <li><a href="{% url 'goodslist' a.id %}">{{ a.name }}</a></li>
            </ol>
      </div>
      <!-- 面包屑 导航 E-->
      <!-- 分类列表 -->
      <div class="selector hidden-xs hidden-sm">
        <div class="sl-category">
            <div class="sl-line-wrap clearfix">
              <div class="mod-key">分类：</div>
              <div class="mod-value">
                <div class="mod-value-list">
                  <ul>
                    <li class="">
                      <a href="javascript:void(0)" title="全部">全部</a>
                    </li>

                   <!--分类for遍历-->
                    {% for v in b %}
                    <li class="">
                      <a href="{% url 'goodslist' v.id %}" title="{{ v.name }}">{{ v.name }}</a>
                    </li>
                    {% endfor %}

                  </ul>
                </div>
              </div>
            </div>
        </div>
      </div>
      <!-- 分类列表 E -->

      <!-- 分类导航 -->
      <div class="filter clearfix hidden-xs hidden-sm" style="display:block">
        <div class="filter-order">
          <a class="active" data-tag="0" data-mtype="store_list_sx_1" href="javascript:void(0);">
              推荐
          </a>
          <a data-tag="1" data-mtype="store_list_sx_2" href="javascript:void(0);">
              新品
          </a>
          <a data-tag="2" data-mtype="store_list_sx_3" href="javascript:void(0);">
              价格<i class="icon-arrow-down"></i>
          </a>
        </div>
        <div class="filter-condition">
          <label class="bs-checkbox" data-mtype="store_list_sx_xz">
              <i></i>仅显示有货商品
          </label>
        </div>
      </div>


      <!-- 商品列表 -->
      <div class="goods-list">
        <div class="row">

          <!--商品for遍历-->
          {% for i in c %}
          <div class="col-md-3 col-sm-6 col-xs-6">
            <div class="gl-item">
              <div class="compare-btn-list" style="display: none;">
                  <i class="iconfont  icon-duibi compare-duibi"></i>
                  <span class="hidden-xs hidden-sm">对比</span>
              </div>
              <div class="gl-item-wrap">
                <!-- Tab panes -->
                <div class="tab-content">
                  <div role="tabpanel" class="tab-pane active mod-pic" id="list-p1">
                    <a href="{% url 'goodsinfo' i.id %}">
                      <img class="lazy j-modProduct" src="{{ i.pic }}" width="220" height="220">
                    </a>
                  </div>
                </div>

                <!-- Nav tabs -->


                <h2>{{ i.title }}</h2>
                <h3 class="red" title="现货速发  双瞳如小窗 佳景观历历">
                现货速发  双瞳如小窗 佳景观历历
                </h3>
                <dd class="mod-price">
                    <span>￥</span>
                    <span class="vm-price">{{ i.price }}</span>
                    <span class="vm-start">起</span>
                </dd>
              </div>
            </div>
          </div>
          {% endfor %}
            <!--商品遍历结束-->


        </div>
      </div>
      <!-- 商品列表 -->
      <!-- 推荐商品 -->
      <div class="recommend  hidden-xs hidden-sm">
       <div class="recommend-hd">
            <h2 class="mod-title">为您推荐</h2>
       </div>
       <div class="recommend-slider">
          <div class="flex-viewport" style="overflow: hidden; position: relative;">
            <ul class="recommend-slider-wrap" style="width: 1000%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">

                <!--for 推荐-->
                {% for i in d %}
              <li class="rs-item" style="width: 245.6px; margin-right: 5px; float: left; display: block;">
                <a class="rs-item-wrap" title="魅蓝 Note5" href="{% url 'goodsinfo' i.id %}" target="_blank">
                  <div class="mod-pic">
                    <img src="{{ i.pic }}" style="display: inline;" width="180" height="180">
                  </div>
                  <div class="mod-desc">
                    <h4 class="vm-title">{{ i.title }}</h4>
                    <h6 class="vm-subtitle" title="{{ i.title }}">{{ i.title }}</h6>
                    <p class="vm-price">
                        <span>¥</span><span class="vm-price-text">{{ i.price }}</span>
                    </p>
                  </div>
                  <span class="mod-sign" style="background-color: #f0415f;">特惠</span>
                </a>
              </li>
                {% endfor %}

            </ul>
          </div>
        </div>
      </div>
      <!-- 推荐商品 E -->

    </div>
  </div>
{% endblock %}